﻿<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="keywords" content="天地图"/> 
    <title>天地图－地图API－范例－自定义标注图片</title> 
    <script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script> 
 
    <script> 
 
 
        var map; 
        var zoom = 12; 
        function onLoad() { 
            //初始化地图对象 
            map = new T.Map("mapDiv"); 
            //设置显示地图的中心点和级别 
            map.centerAndZoom(new T.LngLat(116.40969, 39.89945), zoom); 
 
 
            //创建图片对象 
            var icon = new T.Icon({ 
                iconUrl: "http://api.tianditu.com/img/map/markerA.png", 
                iconSize: new T.Point(19, 27), 
                iconAnchor: new T.Point(10, 25) 
            }); 
            //向地图上添加自定义标注 
            var marker = new T.Marker(new T.LngLat(116.411794, 39.9068), {icon: icon}); 
            map.addOverLay(marker); 
        } 
 
    </script> 
</head> 
<body onLoad="onLoad()"> 
<div id="mapDiv" style="position:absolute;width:600px; height:500px"></div> 
<div style="position:absolute;left:620px;"> 
    <ul> 
        <li>本示例演示如何自定义标注图片。</li> 
        <p><a href="http://lbs.tianditu.com/api-new/html5/examples.html">返回所有范例列表</a></p> 
    </ul> 
</div> 
</body> 
</html>